import React, { Component, CSSProperties } from 'react'
import { goods } from '../../type/home'
import { getGoodsList } from '../../api/home'
import { SearchBar, List, Image } from 'antd-mobile'

import { List as VirtualizedList, AutoSizer } from 'react-virtualized'

export default class Index extends Component {
  state = {
    goodData: [] as goods[],
    page: {
      count: 1,
      limitNum: 20
    }
  }
  getData = async () => {
    const res = await getGoodsList(this.state.page)
    this.state.goodData = res.data
  }
  componentDidMount () {
    this.getData()
  }
  rowRenderer = ({
    index,
    key,
    style
  }: {
    index: number
    key: string
    style: CSSProperties
  }) => {
    const item = this.state.goodData[index]
    return (
      <List.Item
        key={key}
        style={style}
        prefix={
          <Image
            src={item?.img1}
            style={{ borderRadius: 20 }}
            fit='cover'
            width={60}
            height={60}
          />
        }
        description={item?.originprice}
      >
        {item?.proname}
      </List.Item>
    )
  }
  render () {
    return (
      <div>
        <div
          className='header'
          style={{
            background: '#c82519',
            width: '375px',
            height: '50px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          <SearchBar
            placeholder='请输入内容'
            style={{ width: '300px', '--border-radius': '20px' }}
          />
        </div>
        <List>
          {this.state.goodData && (
            <AutoSizer disableHeight>
              {({ width }) => (
                <VirtualizedList
                  rowCount={20} //要渲染的列表数量
                  rowRenderer={this.rowRenderer} //以函数的形式引入进来
                  width={width}
                  height={1000} //高度
                  rowHeight={120} //可以是给定的行高也可以是函数返回的行高
                  overscanRowCount={6}
                  // style={{
                  //   height: '40.7rem',
                  //   width: '35rem',
                  // }}
                />
              )}
            </AutoSizer>
          )}
        </List>
      </div>
    )
  }
}
